<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElTooltip, ElButton, ElDialog } from 'element-plus'
// ✅ 手动定义 Tooltip 的 placement 类型
type TooltipPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'
// ==================== Props 定义 ====================
export interface Props {
  content: string
  maxWidth?: string
  lineClamp?: number
  placement?: TooltipPlacement
  showTooltip?: boolean
  expandText?: string
  collapseText?: string
}

const props = withDefaults(defineProps<Props>(), {
  maxWidth: '200px',
  lineClamp: 2,
  placement: 'top',
  showTooltip: true,
  expandText: '展开',
  collapseText: '收起',
})

// ==================== 是否需要省略或显示“展开”按钮 ====================
const shouldShowExpand = computed(() => {
  return props.content && props.content.length > 10
})

// ==================== Dialog 控制 ====================
const dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
}
const closeDialog = () => {
  dialogVisible.value = false
}

// ==================== 动态 class ====================
const ellipsisClass = computed(() => {
  const cls: string[] = ['ellipsis-cell']
  if (props.lineClamp === 0 || props.lineClamp === 1) {
    cls.push('ellipsis-cell--single')
  } else if (props.lineClamp > 1) {
    cls.push('ellipsis-cell--multi')
  }
  return cls
})
</script>

<template>
  <div class="ellipsis-cell-wrapper" :style="{ maxWidth: props.maxWidth }">
    <!-- Tooltip 包裹省略文本 -->
    <el-tooltip
      v-if="showTooltip && shouldShowExpand"
      :content="content"
      :placement="placement"
      effect="dark"
      :teleported="true"
    >
      <div
        :class="ellipsisClass"
        :style="{
           WebkitLineClamp: lineClamp ? lineClamp : 'unset',
        }"
      >
        {{ content }}
      </div>
    </el-tooltip>

    <!-- 无 tooltip 时的展示 -->
    <div
      v-else
      :class="ellipsisClass"
      :style="{
        WebkitLineClamp: lineClamp && !dialogVisible ? lineClamp : 'unset',
      }"
    >
      {{ content }}
    </div>

    <!-- 展开按钮：打开 Dialog -->
    <template v-if="lineClamp && lineClamp > 1">
      <el-button
        v-if="shouldShowExpand"
        size="small"
        text
        class="expand-btn"
        type="primary"
        @click="openDialog"
      >
        {{ expandText }}
      </el-button>
    </template>

    <!-- 全量内容浮层：使用 Dialog -->
    <el-dialog
      v-model="dialogVisible"
      :title="null"
      width="auto"
      custom-class="content-dialog"
      @closed="closeDialog"
      :append-to-body="true"
      :teleported="false"
    >
      <div class="dialog-content">
        <p>{{ content }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.ellipsis-cell-wrapper {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.ellipsis-cell--single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-cell--multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.4;
}

.expand-btn {
  margin-left: 4px;
  font-size: 12px;
  padding: 0;
}

/* Dialog 样式 */
:deep(.content-dialog) {
  min-width: 300px;
  max-width: 80vw;
  max-height: 80vh;
  overflow: auto;
}

.dialog-content {
  padding: 10px 0;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
  color: #333;
}
</style>